<template>
  <a-collapse default-active-key="1" :bordered="false">
    <a-collapse-panel :header="coursename" key="1">
      <button class="add-btn" @click="addcourse(prepareNumber)">
        添加课时
      </button>
      <a-list :data-source="coursehours">
        <a-list-item slot="renderItem" slot-scope="item, index" :id="index">
          <a-input
            v-if="item.editable"
            style="margin: -5px 0"
            :value="item.name"
            ref="courseinput"
            @keyup.enter="(e) => handleChange(index, e.target.value)"
            @blur="(e) => handleChange(index, e.target.value)"
          />
          <span v-else class="coursename" @click="courseclick(index)">{{
            item.name
          }}</span>
          <!-- publish表示已经发布的不允许修改 -->
          <template #extra v-if="!item.publish && !coursehours[index].editable">
            <a-button-group>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>编辑名称</span>
                </template>
                <a-button
                  icon="edit"
                  style="color: #000000a6"
                  size="small"
                  type="link"
                  @click="editcourse(index)"
                ></a-button>
              </a-tooltip>

              <a-tooltip placement="top">
                <template slot="title">
                  <span>删除课时</span>
                </template>
                <a-button
                  icon="minus"
                  style="color: #000000a6"
                  size="small"
                  type="link"
                  @click="deletecourse(index)"
                ></a-button>
              </a-tooltip>
            </a-button-group>
          </template>
        </a-list-item>
      </a-list>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import axios from "@/utils/axios";
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      courseIndex: undefined,
      prepareNumber: this.$route.query.prepareNumber,
      coursehours: [],
    };
  },
  methods: {
    getCourseHour() {
      this.$store
        .dispatch("teacher/getCourseHours", {
          lesson_id: this.lesson_id,
          teacher_id: this.uid,
        })
        .then(() => {
          this.coursehours = this.$store.getters["teacher/courseHours"].map(
            (item) => ({
              editable: false,
              ...item,
            })
          );
          if (!this.$store.state.teacher.courseHours.length) {
            this.addcourse(0); 
            this.$store.commit("teacher/updateCurCourseHour", 0);
          }
        });
    },
    courseclick(index) {
      if (this.courseIndex !== undefined) {
        // 未点击按钮回复从前颜色
        document.getElementById(this.courseIndex).style.color = "#000000a6";
      }
      document.getElementById(index).style.color = "#1890ff";
      this.courseIndex = index;
      this.$store.commit("teacher/updateCurCourseHour", index);
    },
    editcourse(index) {
      this.coursehours[index].editable = true;
      this.$nextTick(() => {
        this.$refs.courseinput.focus();
      });
    },
    addcourse(index) {
      this.coursehours.splice(index + 1, 0, {
        name: "新增课时",
        editable: true,
        isNew: true,
        publish: 0,
      });
      this.$nextTick(() => {
        this.$refs.courseinput.focus();
      });
      this.prepareNumber += 1;
    },
    deletecourse(index) {
      axios
        .post("pc/v1/prepares/deleteSection", {
          lesson_id: this.lesson_id,
          teacher_id: this.uid,
          section_index: index + 1,
        })
        .then(({ data }) => {
          if (!data.status) throw "delete coursehour fail";
          this.coursehours.splice(index, 1);
          if (this.$store.state.teacher.courseHours.length) {
            this.$store.commit("teacher/updateCurCourseHour", index - 1);
          }
          // 如果删除的是选中的课时，则取消选中课时记录
          if (index == this.courseIndex) this.courseIndex = undefined;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleChange(index, value) {
      const cb = (item, idx) => item.name === value && index !== idx;
      if (this.coursehours.some(cb)) {
        this.$message.info("课时名称重复");
        return null;
      }
      let coursehour = this.coursehours[index];
      coursehour.name = value;
      coursehour.editable = false;
    },
  },
  computed: {
    ...mapState({
      uid: (state) => state.public.uid,
    }),
    lesson_id() {
      return this.$route.query.lessonId;
    },
    coursename() {
      return this.$route.query.lessonName;
    },
  },
  mounted() {
    this.getCourseHour();
  },
};
</script>

<style scoped>
.coursename {
  font-size: 1.4rem;
  margin-left: 10px;
  cursor: pointer;
}
/* .ant-collapse {
  
} */
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  color: #000000a6;
  font-size: 1.6rem;
  font-weight: 500;
}
.ant-collapse {
  background-color: #f9f7f6;
}

/* .ant-btn {
  color: #f9f7f6;
} */
.add-btn {
  width: 100%;
  display: block;
  background-color: #4abac4;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: #ffffff;
}
</style>
